{% extends "../base.html" %}

{% block title %} {% end %}

{% block body %}
<div class="layui-body">
    <div class="layui-tab" lay-filter="menu_tab">
        <ul class="layui-tab-title">
            {%set tab_key=1 %}
            {% for tab in tab_data %}
            <li class="{% if tab_key==1 %}layui-this{% end %}" lay-id="{{ tab_key }}">{{ tab['title'] }}</li>
            {%set tab_key+=1 %}
            {% end %}
        </ul>

        <div class="layui-tab-content">
            {%set k = 1 %}
            {% for v in menu_list %}
                <div class="layui-tab-item layui-form menu-dl {% if k==1 %}layui-show{% end %}">
                <form class="page-list-form">
                    <div class="page-toolbar">
                        <div class="layui-btn-group fl">
                            <a href="/admin/menu/add?parent_id={{ v['id'] }}" class="layui-btn layui-btn-primary"><i class="aicon ai-tianjia"></i>添加子菜单</a>
                            <a data-href="/admin/menu/edit?status=1" class="layui-btn layui-btn-primary j-page-btns"><i class="aicon ai-qiyong"></i>启用</a>
                            <a data-href="/admin/menu/edit?status=0" class="layui-btn layui-btn-primary j-page-btns"><i class="aicon ai-jinyong1"></i>禁用</a>
                            <a data-href="#" data-href="/admin/menu/delete" class="layui-btn layui-btn-primary j-page-btns confirm"><i class="aicon ai-jinyong"></i>删除</a>
                            <a href="/admin/menu/export" class="layui-btn layui-btn-primary"><i class="aicon ai-daochu"></i>导出</a>
                        </div>
                    </div>
                    <dl class="menu-dl1 menu-hd mt10">
                        <dt>菜单名称</dt>
                        <dd>
                            <span class="hd">排序</span>
                            <span class="hd2">状态</span>
                            <span class="hd3">操作</span>
                        </dd>
                    </dl>
                    {%set kk = 1 %}
                    {% for vv in v['children'] %}
                    <dl class="menu-dl1">
                        <dt>
                            <input type="checkbox" name="ids" value="{{ vv['id'] }}" class="checkbox-ids" lay-skin="primary" title="{{ vv['title'] }}">
                            <div class="layui-form-checkbox" lay-skin="primary">
                                <span>{{ vv['title'] }}</span>
                                <i class="layui-icon">&#xe626;</i>
                            </div>
                            <input type="text" class="menu-sort j-ajax-input" name="sort[{{ kk }}]" onkeyup="value=value.replace(/[^\d]/g,'')" value="{{ vv['sort'] }}" data-value="{{ vv['sort'] }}" data-href="/admin/menu/sort?ids={{ vv['id'] }}">
                            <input type="checkbox" name="status" value="{{ vv['status'] }}" {% if vv['status']==1 %}checked=""{% end %} lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用" data-href="/admin/menu/status?ids={{ vv['id'] }}">
                            <div class="layui-form-switch">
                                <em>
                                {% if vv['status']==1 %}启用{% else %}禁用{% end %}
                                </em>
                                <i></i>
                            </div>
                            <div class="menu-btns">
                                <a href="/admin/menu/edit?id={{ vv['id'] }}&menu_tab={{ k }}" title="编辑">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a href="/admin/menu/add?parent_id={{ vv['id'] }}" title="添加子菜单">
                                    <i class="layui-icon">&#xe654;</i>
                                </a>
                                <a href="#" data-href="/admin/menu/delete?id={{ vv['id'] }}" class="j-dl-del" title="删除">
                                    <i class="layui-icon">&#xe640;</i></a>
                            </div>
                        </dt>
                        <dd>
                            {%set kk+=1 %}
                            {% if len(vv.get('children', []))>0 %}
                                {% for vvv in vv['children'] %}
                                    {% if vvv['title']=='预留占位' %}
                                    {%set continue %}
                                    {% end%}
                                    {%set kk+=1 %}
                                    <dl class="menu-dl2">
                                        <dt>
                                            <input type="checkbox" name="ids[{{ kk }}]" value="{{ vvv['id'] }}" class="checkbox-ids" lay-skin="primary" title="{{ vvv['title'] }}"><div class="layui-form-checkbox" lay-skin="primary"><span>{{ vvv['title'] }}</span><i class="layui-icon">&#xe626;</i></div>
                                            <input type="text" class="menu-sort j-ajax-input" name="sort[{{ kk }}]" onkeyup="value=value.replace(/[^\d]/g,'')" value="{{ vvv['sort'] }}" data-value="{{ vvv['sort'] }}" data-href="/admin/menu/sort?ids={{ vvv['id'] }}">
                                            <input type="checkbox" name="status" value="{{ vvv['status'] }}" {% if vvv['status']==1 %}checked=""{% end %} lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用" data-href="/admin/menu/status?ids={{ vvv['id'] }}">
                                            <div class="layui-form-switch">
                                                <em>
                                                {% if vvv['status']==1 %}启用{% else %}禁用{% end %}
                                                </em>
                                                <i></i>
                                            </div>
                                            <div class="menu-btns">
                                                <a href="/admin/menu/edit?id={{ vvv['id'] }}&menu_tab={{ k }}" title="编辑"><i class="layui-icon">&#xe642;</i></a>
                                                <a href="/admin/menu/add?parent_id={{ vvv['id'] }}" title="添加子菜单"><i class="layui-icon">&#xe654;</i></a>
                                                <a href="#" data-href="/admin/menu/delete?id={{ vvv['id'] }}" class="j-dl-del" title="删除"><i class="layui-icon">&#xe640;</i></a>
                                                {% if vvv['path']=='/admin/plugins/run' %}
                                                <a href="/admin/menu/export?uid{{ vvv['id'] }}" title="导出菜单"><i class="layui-icon" style="font-weight:bolder;">&#xe601;</i></a>
                                                {% end %}
                                            </div>
                                        </dt>
                                        {%set kk+=1 %}
                                        {% for vvvv in vvv['children'] %}
                                        {%set kk+=1 %}
                                        <dd>
                                            <input type="checkbox" name="ids[{{ kk }}]" value="{{ vvvv['id'] }}" class="checkbox-ids" lay-skin="primary" title="{{ vvvv['title'] }}"><div class="layui-form-checkbox" lay-skin="primary"><span>{{ vvvv['title'] }}</span><i class="layui-icon">&#xe626;</i></div>
                                            <input type="text" class="menu-sort j-ajax-input" name="sort[{{ kk }}]" onkeyup="value=value.replace(/[^\d]/g,'')" value="{{ vvvv['sort'] }}" data-value="{{ vvvv['sort'] }}" data-href="/admin/menu/sort?ids={{ vvvv['id'] }}">
                                            <input type="checkbox" name="status" value="{{ vvvv['status'] }}" {% if vvvv['status']==1 %}checked=""{% end %} lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用" data-href="/admin/menu/status?ids={{ vvvv['id'] }}">
                                            <div class="layui-form-switch">
                                                <em>
                                                {% if vvvv['status']==1 %}启用{% else %}禁用{% end %}
                                                </em>
                                                <i></i>
                                            </div>
                                            <div class="menu-btns">
                                                <a href="/admin/menu/edit?id={{ vvvv['id'] }}&menu_tab={{ k }}" title="编辑"><i class="layui-icon">&#xe642;</i></a>
                                                <a href="/admin/menu/add?parent_id={{ vvvv['id'] }}" title="添加子菜单"><i class="layui-icon">&#xe654;</i></a>
                                                <a href="#" data-href="/admin/menu/delete?id={{ vvvv['id'] }}" class="j-dl-del" title="删除之后无法恢复，您确定要删除吗？"><i class="layui-icon">&#xe640;</i></a>
                                            </div>
                                        </dd>
                                        {% end %}
                                    </dl>
                                {% end %}
                            {% end %}
                        </dd>
                    </dl>
                    {% end %}
                </form>
                </div>
                {%set k += 1 %}
            {% end %}
            <div class="layui-tab-item layui-form menu-dl">
                <form class="page-list-form">
                    <div class="page-toolbar">
                        <div class="layui-btn-group fl">
                            <a href="/admin/menu/add?parent_id=top" class="layui-btn layui-btn-primary"><i class="aicon ai-tianjia"></i>添加顶层菜单</a>
                        </div>
                    </div>
                    <dl class="menu-dl1 menu-hd mt10">
                        <dt>模块名称</dt>
                        <dd>
                            <span class="hd">排序</span>
                            <span class="hd2">状态</span>
                            <span class="hd3">操作</span>
                        </dd>
                    </dl>
                    {%set k = 1 %}
                    {% for v in menu_list %}
                    <dl class="menu-dl1">
                        <dt>
                            <input type="checkbox" name="ids[{{ k }}]" class="checkbox-ids" value="{{ v['id'] }}" lay-skin="primary" title="{{ v['title'] }}">
                            <div class="layui-form-checkbox" lay-skin="primary">
                                <span>{{ v['title'] }}</span>
                                <i class="layui-icon">&#xe626;</i>
                            </div>
                            <input type="text" class="layui-input j-ajax-input menu-sort" name="sort[{{ k }}]" onkeyup="value=value.replace(/[^\d]/g,'')" value="{{ v['sort'] }}" data-value="{{ v['sort'] }}" data-href="/admin/menu/sort?ids={{ v['id'] }}">

                            <input type="checkbox" name="status" value="{{ v['status'] }}" {% if v['status']==1 %}checked=""{% end %} lay-skin="switch" lay-filter="switchStatus" lay-text="启用|禁用" data-href="/admin/menu/status?ids={{ v['id'] }}" >
                            <div class="layui-form-switch">
                                <em>
                                {% if v['status']==1 %}启用{% else %}禁用{% end %}
                                </em>
                                <i></i>
                            </div>
                            <div class="menu-btns">
                                <a href="/admin/menu/edit?id={{ v['id'] }}&menu_tab={{ len(menu_list)+1 }}" title="编辑">
                                    <i class="layui-icon">&#xe642;</i>
                                </a>
                                <a href="#" data-href="/admin/menu/delete?id={{ v['id'] }}" class="j-dl-del" title="删除之后无法恢复，您确定要删除吗？"><i class="layui-icon">&#xe640;</i></a>
                            </div>
                        </dt>
                    </dl>
                    {% end %}
                </form>
            </div>
        </div>
    </div>
</div>
{% end %}

{% block javascript %}
<script type="text/javascript">
layui.define(['element', 'form', 'jquery', 'layer'], function(exports) {
    var form = layui.form
    var $ = layui.jquery
    var element = layui.element
    var layer = layui.layer

    var menu_tab = location.hash.replace(/^#menu_tab=/, '');
    element.tabChange('menu_tab', menu_tab);

    // 监听状态设置开关
    form.on('switch(switchStatus)', function(data) {
        var that = $(this), status = this.checked ? 1 : 0
        if (!that.attr('data-href')) {
            layer.msg('{{ _('请设置href参数') }}')
            return false
        }

        $.get(that.attr('data-href'), {val:status}, function(res) {
            if (res.code != 0) {
                // that.trigger('click')
                layer.msg(res.msg)
            }
        })
    })
    /* 用ajax方式更新input*/
    $('.j-ajax-input').focusout(function(){
        var that = $(this), _val = that.val()
        if (_val == '') return false
        if (that.attr('data-value') == _val) return false
        if (!that.attr('data-href')) {
            layer.msg('{{ _('请设置href参数') }}')
            return false
        }
        $.post(that.attr('data-href'), {val:_val, _xsrf: get_xsrf()}, function(res) {
            if (res.code == 0) {
                that.attr('data-value', _val)
            }
            layer.msg(res.msg)
        })
    })

    // TR数据行删除
    $('.j-dl-del').click(function() {
        var that = $(this)
        var href = !that.attr('data-href') ? that.attr('href') : that.attr('data-href')
        layer.confirm('删除之后无法恢复，您确定要删除吗？', {title:false, closeBtn:0}, function(index){
            if (!href) {
                layer.msg('{{ _('请设置href参数') }}')
                return false
            }
            $.ajax({
                type: 'DELETE',
                url: href,
                data: {menu_tab:menu_tab, _xsrf: get_xsrf()},
                dataType: 'json',
                success: function(data) {
                    that.parent().parent().parent().remove()
                    if (data.code==0) {
                        layer.msg('{{ _('操作成功') }}')
                    } else if(data.msg) {
                        layer.msg(data.msg)
                    } else {
                        layer.msg('{{ _('未知错误') }}')
                    }
                    setTimeout(function(){
                        layer.close(index)
                    }, 2000)
                },
                error: function(xhr){
                    // console.log(xhr.responseJSON)
                    if (xhr.responseJSON && xhr.responseJSON.msg) {
                        layer.msg(xhr.responseJSON.msg)
                    } else {
                        layer.msg('{{ _('未知错误') }}')
                    }
                }
            })
            layer.close(index)
        })
        return false
    })
    $('.menu-dl1 dt').mouseover(function() {
        $(this).css("background-color","#e6e6e6")
    }).mouseout(function(){
        $(this).css("background-color","#ffffff")
    })
    $('.menu-dl2').mouseover(function() {
        $(this).css("background-color","#e6e6e6")
    }).mouseout(function(){
        $(this).css("background-color","#ffffff")
    })
})
</script>
{% end %}